<script setup>
import { useCartStore } from '@/stores/cart.js'
// 获取商品集合
const props = defineProps(['category', 'shopName','min'])

const cartStore = useCartStore()

// console.log(props.category);

// 减少商品
const delProduct = (product) => {
    product.number--
    // 判断，如果购物车个数是 0，将该商品删除购物车
    if (product.number == 0) {
        
        const res = cartStore.cartList.find(item => item.name == props.shopName )
        res.list = res.list.filter(item => item.id != product.id)
        console.log(res.list);
    }
}

// 增加商品
const addProduct = (product) => {
    product.number++
    // 获取对应的店铺进行 增加操作
    const res = cartStore.cartList.find(item => item.name == props.shopName)
    // 如果没有找到对应的店铺，表示需要添加店铺到购物车
    if (!res) {
        // 定义店铺购物车集合
        const shopCart = { name: '', list: [] }
        // 存入相应的数据
        shopCart.name = props.shopName
        shopCart.list.push(product)
        // 将店铺存入 cart购物车仓库集合
        cartStore.cartList.push(shopCart)
    } else {
        // 表示当前购物车仓库已有该店铺
        // 判断商品是否重复
        const res2 = res.list.find(item => item.id == product.id)
        if (!res2) {
            // 表示商品不存在，添加商品
            res.list.push(product)
        }

    }
}


</script>

<template>
    <div class="product" >
        <div :class="[props.min == 'min' ? 'product_img--min' :'product_img']"> <!-- <div class="product_img--min"> -->
            <img :src="`http://www.dell-lee.com/imgs/vue3/${props.category.imgName}.png`" alt="">
        </div>
        <div class="product_content">
            <div class="product_content_title">{{ props.category.title }}</div>
            <div class="product_content_sales">月售 {{ props.category.sales }} 件</div>
            <slot></slot>
            <div class="product_content_price">{{ props.category.price }} <span class="product_content_old_price">{{ props.category.oldPrice
                    }}</span></div>

        </div>
        <div class="product_number">
            <span class="product_number_minus" :class="{ 'disabled': props.category.number == 0 }"
                @click="delProduct(props.category)">-</span>
            {{ props.category.number }}
            <span class="product_number_plus" @click="addProduct(props.category)">+</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';

// 是否禁用
.disabled {
    pointer-events: none;
}

.product {
    padding: .18rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    border-bottom: .01rem solid $content-bgColor;

    &_img {
        width: .68rem;
        margin-right: .18rem;

        img {
            width: .68rem;
            height: .68rem;
        }
    }

    &_img--min {
        width: .48rem;
        margin-right: .18rem;

        img {
            width: .48rem;
            height: .48rem;
        }
    }

    &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &_title {
            font-size: .14rem;
            font-weight: bold;
            color: $content_fontcolor;
            @include ellipse;
        }

        &_price {
            color: $hightlight-fontColor;
        }

        &_old_price {
            color: $light-fontColor;
            text-decoration: line-through;
        }
    }

    &_number {
        position: absolute;
        right: .18rem;
        bottom: .18rem;

        &_minus,
        &_plus {
            display: inline-block;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            font-size: .16rem;
            text-align: center;
        }

        &_minus {
            border: .01rem solid $medium-fontColor;
            color: $medium-fontColor;
            margin-right: .08rem;
        }

        &_plus {
            background-color: $btn-bgColor;
            color: $bgColor;
            margin-left: .08rem;
        }
    }
}
</style>